<template>
  <!-- 待办事项页面 -->
  <view class="todo-page">
    <!-- Tabs 顶部导航 top: 68px;-->
    <view class="tabs-container">
      <up-tabs :list="tabs" @click="tabsclick" />

      <!-- 筛选区域 top: 115px;-->
      <view class="filter-bar" style="position: fixed; left: -15px; width: 100%; ">
        <!-- 分类筛选 -->
        <view class="filter-item" @click="showCategoryClick">
          <text>{{ categoryTitle }}</text>
          <up-icon :name="isArrowUp ? 'arrow-up' : 'arrow-down'" size="14" color="#409eff"></up-icon>
        </view>
      </view>

      <view class="filter-bar" style="position: fixed; left: 100px; width: 100%; ">
        <!-- 分类筛选 -->
        <view class="filter-item" @click="filterPopupClick">
          <text>筛选</text>
          <view style="width: 18px;height: 18px;position: relative;top: 1px;left: -5px;">
            <image style="width: 100%;height: 100%;" src="@/static/appy-icon/shaixuan.png"></image>
          </view>
        </view>
      </view>

    </view>

    <!-- 内容区域，使用 scroll-view 优化滚动  position: fixed; top: 60px;-->
    <view class="content-container" style="height: 100%;overflow: hidden;">
      <Waitformetohandleit :modalTitleGet="modalTitleGet" ref="Waitformetohandleit"
        @setToDoInformation="setToDoInformation"></Waitformetohandleit>
    </view>


    <!-- 全部分类筛选弹窗 -->
    <up-popup :show="showCategoryPopup" type="bottom" background-color="#fff" @close="showCategoryPopup = false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">全部分类</text>
          <view class="close-button" @click="showCategoryPopup = false">
            <text style="font-size: 18px; color: #999;">×</text>
          </view>
        </view>
        <view class="popup-body">
          <!-- 左侧分类 -->
          <scroll-view scroll-y class="left-category">
            <view v-for="(item, index) in leftOptions" :key="index" class="category-item"
              :class="{ 'active': activeLeftIndex === index }" @click="selectLeftCategory(index, item)">
              <text>{{ item.label }}</text>
            </view>
          </scroll-view>

          <!-- 右侧子分类 -->
          <scroll-view scroll-y class="right-subcategory">
            <view v-for="(item, index) in rightOptions" :key="index" class="subcategory-item"
              :class="{ 'active': categorySelections[activeLeftIndex] === item.value }"
              @click="selectRightCategory(index, item)">
              <text>{{ item.label }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </up-popup>

    <!-- 筛选弹窗 -->
    <up-popup :show="filterPopup" type="bottom" background-color="#fff" @close="filterPopup = false">
      <view class="filterPopup">
        <view class="popup-header">
          <text class="popup-title">筛选</text>
          <view class="close-button" @click="filterPopup = false">
            <text style="font-size: 18px; color: #999;">×</text>
          </view>
        </view>

        <view class="popup-body">
          <view class="read-status">
            <view class="read-status-title">
              消息状态
            </view>
            <view class="read-status-container">
              <view class="status-item" :class="{ active: paramsForm.readStatus === 'all' }" @click="readStatusClick('all')">
                <text>已读</text>
              </view>
              <view class="status-item" :class="{ active: paramsForm.readStatus === 'unread' }" @click="readStatusClick('unread')">
                <text>未读</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>


<script>
import Waitformetohandleit from './components/Waitformetohandleit.vue';
export default {
  components: {
    Waitformetohandleit,
  },
  props: {
    modalTitleGet: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showCategoryPopup: false,
      filterPopup: false,
      sortValue: 1,
      currentTab: 0,
      categoryTitle: '全部分类',
      tabs: [
        { name: '待我处理', },
        { name: '我已处理' },
        { name: '我创建的' },
        { name: '抄送我的' },
        { name: '评论', }
      ],
      categoryValue: 0,
      inputvalue: null,
      paramsForm: {
        keywords: "",
        page: 1,
        row: 10,
        style: 1,
        time: 1,
        type: 0,
        readStatus:'all'
      },
      activeLeftIndex: 0,
      activeRightIndex: 0,
      leftOptions: [
        { label: '全部分类', value: 0, count: 2 },
        { label: '创建时间', value: 1, count: 1 },
      ],
      rightOptions: [
        { label: '全部分类', value: 0 },
        { label: 'OA审批', value: 1 },
        { label: '项目', value: 2 },
        { label: '智能报表', value: 3 },
        { label: '表单', value: 4 },
        { label: '其他', value: 5 }
      ],
      isArrowUp: false, // 控制箭头方向
      categorySelections: {
        0: 0, // 全部分类 => 选中“全部分类”
        1: 1  // 创建时间 => 选中“倒序”
      },
      selectedStatus: 'all',
    }
  },
  watch: {
    showCategoryPopup: {
      handler (val) {
        this.isArrowUp = val
      },
    }
  },
  methods: {
    setToDoInformation (value) {
      this.tabs = [
        {
          name: '待我处理',
          badge: {
            value: value.wait_info,
          }
        },
        { name: '我已处理' },
        { name: '我创建的' },
        {
          name: '抄送我的',
          badge: {
            value: value.share_info,
          }
        },
        {
          name: '评论',
          badge: {
            value: value.comment_info,
          }

        }
      ]
    },
    tabsclick (item) {
      this.currentTab = item.index;
      this.paramsForm.style = item.index + 1;
      this.categoryTitle = '全部分类'
      this.paramsForm.type = 0
      this.paramsForm.readStatus = 'all'
      this.refClick()
    },
    showCategoryClick () {
      this.showCategoryPopup = true
    },
    filterPopupClick(){
      this.filterPopup = true
    },
    // 选择左侧分类
    selectLeftCategory (index, item) {
      this.activeLeftIndex = index;
      if (index === 0) {
        this.rightOptions = [
          { label: '全部分类', value: 0 },
          { label: 'OA审批', value: 1 },
          { label: '项目', value: 2 },
          { label: '智能报表', value: 3 },
          { label: '表单', value: 4 },
          { label: '其他', value: 5 }
        ];
      } else if (index === 1) {
        this.rightOptions = [
          { label: '倒序', value: 1 },
          { label: '正序', value: 2 }
        ];
      }

      this.activeRightIndex = 0;
    },
    // 选择右侧子分类
    selectRightCategory (index, item) {
      // 保存当前分类下的选中项
      this.$set(this.categorySelections, this.activeLeftIndex, item.value);
      this.activeRightIndex = index;
      // 更新对应的参数
      if (this.activeLeftIndex === 0) {
        this.paramsForm.type = item.value;
      } else if (this.activeLeftIndex === 1) {
        this.paramsForm.time = item.value;
      }
      this.categoryTitle = item.label
      this.showCategoryPopup = false;
      this.refClick();
    },
    readStatusClick(value){
      this.paramsForm.readStatus = value
      this.filterPopup = false
      this.refClick();
    },
    inputvaluechange (e) {
      // console.log('输入框内容改变', e);
      this.paramsForm.keywords = e;
      this.refClick()
    },
    refClick () {
      this.$refs.Waitformetohandleit.Fathersonoperation(true, {
        keywords: this.paramsForm.keywords,
        style: this.paramsForm.style,
        time: this.paramsForm.time,
        type: this.paramsForm.type,
        readStatus:this.paramsForm.readStatus
      });
    }
  }
}
</script>



<style lang="scss" scoped>
.todo-page {
  width: 100%;
  overflow: hidden;
  background-color: #f6f7f9;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  background-color: #ffffff;
  padding: 5px;
  position: fixed;
  width: 100%;
  height: 70px;
  z-index: 1;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between; // 文字和箭头对齐
  gap: 8px; // 文字和图标之间的间距
  padding: 8px 12px; // 内边距，增加点击区域
  font-size: 14px; // 字体大小
  cursor: pointer; // 鼠标悬停时显示为手型
  transition: all 0.3s ease; // 添加过渡动画
  height: auto;
  border-radius: 10px;
  margin-left: 3%;
}



/* 弹窗样式 */
.popup-content {
  width: 100%;
  height: 60vh;
  background-color: #fff;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between; // 左右布局
  align-items: center; // 垂直居中
  padding: 15rpx;
  border-bottom: 1px solid #f0f0f0;
}

.close-button {
  cursor: pointer; // 鼠标悬停时显示为手型
  padding: 4px; // 增加点击区域
  border-radius: 50%; // 圆形点击区域
  transition: background-color 0.3s ease; // 添加背景色过渡效果

  &:hover {
    background-color: #f0f0f0; // 悬停时的背景色
  }
}


.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.popup-body {
  display: flex;
  height: calc(100% - 53px);
}

.left-category {
  width: 40%;
  height: 100%;
  background-color: #f8f8f8;
}

.right-subcategory {
  width: 60%;
  height: 100%;
  background-color: #fff;
}

.category-item,
.subcategory-item {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.category-item.active {
  background-color: #fff;
  color: #409eff;
  font-weight: bold;
  position: relative;
}

.category-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #409eff;
}

.subcategory-item.active {
  color: #409eff;
  font-weight: bold;
}

.count {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

.todo-page {
  width: 100%;
  overflow: hidden;
  background-color: #f6f7f9;
  display: flex;
  flex-direction: column;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  gap: 10px;

}



.filter-label {
  font-size: 14px;
  color: #333333;
}


.filterPopup {
  width: 100%;
  height: 40vh;
  background-color: #fff;
  overflow: hidden;

  .popup-body {
    padding: 10rpx 30rpx 0; 
    display: flex;
    height: calc(100% - 53px);

    .read-status {
      width: 100%; 

      .read-status-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx; 
        margin-left: 0; 
      }

      .read-status-container {
        display: flex;
        width: 100%;
        gap: 20rpx; 
        justify-content: center; 

        .status-item {
          border-radius: 60px;
          flex: 1; 
          max-width: 300rpx; 
          height: 70rpx;
          text-align: center;
          border: 1px solid #eaeaec;
          box-sizing: border-box;
          font-size: 32rpx;
          line-height: 70rpx; 
          margin-left: 0;
          background-color: #f8f8fa;
          cursor: pointer;
          transition: all 0.2s ease; 
        }


        .status-item:first-child,
        .status-item:last-child {
          border-right: 1px solid #eaeaec;
          border-radius: 60px;
        }

        .status-item.active {
          background-color: #edf4fe;
          color: #82a8e4;
          border-color: #d1e0fa; 
        }

        // 未选中时 hover 效果，提升交互体验
        .status-item:not(.active):hover {
          background-color: #f0f2f5;
        }
      }
    }
  }
}
</style>



<style scoped>
/deep/ .u-dropdown {
  flex: 1;
  z-index: 999;

}

/deep/ .u-dropdown__content {
  border-radius: 8px;
  /*  */
}

/deep/ .u-dropdown__content__mask {
  background: none;
}

/deep/ .u-dropdown__content__popup {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* border: 1px solid #ccc; */
  border-radius: 10px;
}
</style>
